<template>
  <div class="page">
    <!-- <el-scrollbar style="width: 100%;" height="100vh - 120px"> -->
    <el-row :gutter="10" v-loading="loading">
      <el-col :span="16">
        <el-row class="mb-2" :gutter="10">
          <el-col :span="12">
            <el-card shadow="never" style="border-radius: 8px;">
              <template #header>
                <div class="card-header text-base flex justify-between items-center">
                  <span>任务面板</span>
                  <svg-icon icon-class="chongzhi" @click="refresh"></svg-icon>
                </div>
              </template>
              <div class="flex justify-center items-center text-center card-border">
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.shelve_num || 0 }}</div>
                  <div class="text-sm">待上架SKU总数量</div>
                </div>
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.shelve_sku_num || 0 }}</div>
                  <div class="text-sm"> 待上架SKU种类</div>
                </div>
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.ready_process_sku_num || 0 }}</div>
                  <div class="text-sm">待加工SKU数量</div>
                </div>
              </div>
              <div class="flex justify-center items-center text-center">
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.goods_order_num || 0 }}</div>
                  <div class="text-sm">待发货订单数量</div>
                </div>
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.picked_order_num || 0 }}</div>
                  <div class="text-sm">已拣货、待装箱单量</div>
                </div>
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.box_order_num || 0 }}</div>
                  <div class="text-sm">已装箱、待交接单量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" style="border-radius: 8px;">
              <template #header>
                <div class="card-header text-base">
                  <span>当天已办事项</span>
                </div>
              </template>
              <div class="flex justify-center items-center text-center card-border">
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.day_shelve_num || 0 }}</div>
                  <div class="text-sm">已上架SKU数量</div>
                </div>
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.day_shelve_sku_num || 0 }}</div>
                  <div class="text-sm">已上架SKU种类</div>
                </div>
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.day_goods_order_num || 0 }}</div>
                  <div class="text-sm">已下发头程单数量</div>
                </div>
              </div>
              <div class="flex justify-center items-center text-center">
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.day_verify_order_num || 0 }}</div>
                  <div class="text-sm">已复核单据数量</div>
                </div>
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.day_box_order_num || 0 }}</div>
                  <div class="text-sm">已装箱单据数量</div>
                </div>
                <div class="flex-1 py-6">
                  <div class="base-text-color font-bold text-2xl mb-2">{{ datum.data.day_out_order_num || 0 }}</div>
                  <div class="text-sm">已交接单据数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-card shadow="never" style="border-radius: 8px;">
              <template #header>
                <div class="card-header text-base">
                  <span>30天出入库数量统计</span>
                </div>
              </template>
              <lineEcharts :option="datum.day_num"></lineEcharts>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-card class="mb-2" shadow="never" style="border-radius: 8px;">
          <template #header>
            <div class="card-header text-base">
              <span>公告栏</span>
            </div>
          </template>
          <div class="" style="padding-bottom: 8px;">
            <div class="flex justify-between items-center py-4 border-b border-b-gray-100"
              v-for="(item, index) in noticeList" :key="index" @click="noticeView(item)">
              <div class="text-[#333333]">{{ item.title }}</div>
              <div class="text-xs text-[#999999]">{{ item.update_time }}</div>
            </div>
            <div class="mt-2 flex justify-end">
              <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[100, 200, 300, 400]" size="small" layout="total, prev, pager, next, jumper" :total="total"
                @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-card>
        <el-card shadow="never" style="border-radius: 8px;">
          <template #header>
            <div class="card-header text-base">
              <span>库容监测</span>
            </div>
          </template>
          <el-scrollbar height="420px">
            <el-space wrap :size="10">
              <div class="inventory-item" v-for="item in datum.storage_monitor">
                <div class="flex items-center text-center text-sm">
                  <div class="inventory-item_icon mr-1"><svg-icon class="text-white text-xs"
                      icon-class="cangku"></svg-icon>
                  </div>
                  {{ item.warehouse_name }}
                </div>
                <div style="width: 143px;" class="text-center py-4 border-b border-b-gray-200">
                  <el-progress type="circle" width="62" :percentage="item.scale" stroke-width="10"
                    :color="filterColor(item.scale)" />
                </div>
                <div class="flex justify-between items-center text-center px-2 pt-1">
                  <div>
                    <div class="text-[16px] font-semibold text">{{ item.storage }}</div>
                    <div class="text-[12px] text-[#999999]">已存储</div>
                  </div>
                  <div>
                    <div class="text-[16px] font-semibold">{{ item.volume }}</div>
                    <div class="text-[12px] text-[#999999]">库容</div>
                  </div>
                </div>
              </div>
            </el-space>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
    <!-- </el-scrollbar> -->
    <noticeModal ref="noticeRef"></noticeModal>
  </div>
</template>
<script name="HomeIndex" setup>
import { ref, reactive, toRefs, onMounted, vShow } from 'vue'
import { getData, queryNoticeList } from './api/index.js'
import lineEcharts from './components/lineEcharts'
import noticeModal from './components/noticeModal.vue'

const data = reactive({
  datum: {
    data: {},
    day_num: null,
    storage_monitor: []
  },
  noticeList: [],
  pageSize: 3,
  currentPage: 1,
  total: 0,
  loading: false
})
const { datum, pageSize, currentPage, noticeList, total, loading } = toRefs(data)

const filterColor = (val) => {
  if (val == 100) {
    return '#E50113'
  } else if (val >= 75) {
    return '#FF6B34'
  } else if (val >= 5) {
    return '#FFCA34'
  } else {
    return '#34CBFF'
  }
}

const getStatisticalData = async () => {
  try {
    const res = await getData()
    datum.value = res.data
    setTimeout(() => {
      loading.value = false
    }, 200)
  } catch (e) {
    throw Error(e)
  }
}

const getNoticeList = async () => {
  try {
    const res = await queryNoticeList({
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })
    noticeList.value = res.data
    total.value = res.total
  } catch (e) {
    throw Error(e)
  }
}

const noticeRef = ref()
const noticeView = (item) => {
  noticeRef.value.open('view', item.id)
}

const handleCurrentChange = async (val) => {
  currentPage.value = val
  getNoticeList()
}

const refresh = async () => {
  loading.value = true
  getStatisticalData()
  getNoticeList()
}

onMounted(() => {
  loading.value = true
  getStatisticalData()
  getNoticeList()
})

</script>
<style lang="scss" scoped>
.page {
  padding: 16px;
  overflow-y: auto;
}

.card-border {
  border-bottom: 1px dashed #C3DBFF;
}

.inventory-item {
  // min-width: 140px;
  background: #FAFAFA;
  border-radius: 8px;
  border: 1px solid #E6E7E9;
  padding: 8px;
  box-sizing: border-box;

  .inventory-item_icon {
    background-color: #34C9FF;
    border-radius: 50%;
    padding: 2px;
  }
}

:deep(.el-progress path:first-child) {
  stroke: #fff;
}
</style>